<template>
<div class="container">
    <div class="nav-bar flex">
        <div class="active">我要反馈</div>
        <router-link tag="div" :to="'feedback_history'">
            历史反馈
        </router-link>
    </div>
    <div class="nav-bar-before"></div>
    <div class="p2">
        <div class="p2-title">
            反馈类型
        </div>
        <div class="p2-content flex">
            <div class="feedback-type" :class="{'feedback-selected':feedtype.selected}" @click.stop="toggleType(feedtype.id)" v-for="feedtype in feedback_types" :key="feedtype.id">{{feedtype.title}}</div>            
        </div>
    </div>
    <div class="hr-gray"></div>
    <div class="p3">
        <div class="p3-title">
            请描述你遇到的问题（必填）
        </div>
        <div class="p3-content">
            <textarea name="content" v-model="formData.content" maxlength="200" id="content" class="content"></textarea>
            <div class="content-num-tip">{{formData.content.length}}/200</div>
        </div>
        <div class="p3-title">
            上传图片（选填）
        </div>
        <div class="pic-item-area clearfix">
           <vue-core-image-upload
            class="pic-item"
            :crop="false"
            inputOfFile="file"
            :multiple="true"
            @click.native="beforeUpload"
            @imagechanged="imagechanged"
            @imageuploading="imageuploading"
            @errorhandle="imgerrorhandle"
            :multiple-size="leftImgCount"
            @imageuploaded="imageuploaded"
            :max-file-size="2097152"
            :url="'/util/uploadMultipleFiles'" >
          <img src="../../assets/icons/addbtn.png" alt="" >
          </vue-core-image-upload>            
          <div class="pic-item" v-for="(img,index) in formData.imgSrcs" :key="img">
              <img :src="img|absUrl" alt="" >
              <div class="remove-btn" @click="rmImg(index)">×</div>
          </div>
        </div>
    </div>
    <div class="hr-gray"></div>
    <div class="p3">
        <div class="p3-title">
            您的联系方式（选填）
        </div>
        <div class="input-content">
            <input type="text" v-model="formData.contacts" placeholder="手机号/邮箱/QQ/微信等填写其中一项即可" class="contacts">
        </div>
    </div>
    <div class="text-center btn-area">
        <button class="red-rounded-btn" @click="submitFormData">提交</button>
    </div>
</div>  
</template>
<script>
import VueCoreImageUpload from 'vue-core-image-upload'
export default {
   components: {
    'vue-core-image-upload': VueCoreImageUpload,
  },
  data() {
    return {
      selectedType: 0,
      leftImgCount:3,
      contacts:'',      
      formData:{
        content:'',
        contacts:'',
        feedbackTypeId:0,
        imgSrcs:[]
      },
      feedback_types:[]
    };
    
  },
  methods:{
    beforeUpload(e){
      if(this.formData.imgSrcs.length >= 3){
        this.$toast('最多只能上传3张图片');
        e.preventDefault();
      }      
    },
      imgerrorhandle(e){
        if(e == 'FILE NUM OVERLOAD'){
          this.$toast('最多只能上传3张图片');
        }else if(e.indexOf('FILE IS TOO LARGER')!=-1){
           this.$toast('上传文件不能大于2M');
        }
        
      },
      toggleType(typeid){
        this.formData['feedbackTypeId'] = typeid;        
        this.feedback_types.forEach(el=>{
          if(el.id == typeid){
            this.$set(el,'selected',true);
          }else{
            this.$set(el,'selected',false);
          }
        })
      },
      imageuploading(e){
          this.showLoading();
      },
      imagechanged(e){
        console.log(arguments);
      },
      imageuploaded(res){
        this.hideLoading();
        if(res.errcode === 0){ 
          this.formData.imgSrcs.push(...res.info)
          let leftImgCount = 3-this.formData.imgSrcs.length;
          this.leftImgCount = leftImgCount<=0?0:leftImgCount;
        }
      },
      rmImg(idx){
        this.formData.imgSrcs.splice(idx,1);
      }
      ,submitFormData(){
        if(!this.formData.feedbackTypeId){
          this.$toast('请选择反馈类型');
          return;
        }
        if(!this.formData.content){
          this.$toast('请描述你遇到的问题');
          return;
        }
        this.showLoading();
        let postData = Object.assign({},this.formData);
        postData.imgSrcs = postData.imgSrcs.join(',');
        this.$post('/api/save_feedback',postData).then(()=>{
          this.hideLoading();
          this.$toast('感谢您的反馈');
          history.back();
        }).catch(()=>{
          this.hideLoading();
        })
      }
  },
  created(){
    this.showLoading();
    this.$get('/api/feedback_type').then(info=>{
      this.hideLoading();
      this.feedback_types = info;
    })
  }
};
</script>

<style scoped>
.btn-area{
    padding-bottom: 1.3333rem;
}
.red-rounded-btn{
    width: 5rem;
    height: 0.9067rem;
    line-height: 0.8533rem;    
    padding: 0;
    background-color: transparent;
    border-radius: 0.1333rem;
    font-size: 0.3733rem;
    color: #ff2a2a;
    text-align: center;
    border:2px solid #ff2a2a;
}
.input-content{
    padding: 0.4533rem 0;
}
.contacts{
    height: 0.9467rem;
    display: block;
    width: 100%;
    width: 9.2rem;
    box-sizing: border-box;
    outline: none;
    padding: 0 0.1333rem;
    border: 2px solid #eee;
}
.pic-item-area {
  padding-top: 0.3733rem;
  
}
.p3-content {
  margin: 0.4133rem 0;
  position: relative;
}
.pic-item {
  width: 2rem;
  height: 2rem;
  float:left;
  margin-right: 0.4rem;
  position: relative;
}
.pic-item .remove-btn{
  position: absolute;
  right: -0.1rem;
  top:-0.1rem;
  width:0.4rem;
  height:0.4rem;
  line-height:0.36rem;
  text-align: center;
  background-color: #ff2a2a;
  border-radius: 50%;
  color:white;
  font-size:0.32rem;
}
.pic-item:nth-child(4n){
  margin-right: 0;
}
.pic-item img{
  width: 2rem;
  height: 2rem;
  
}
.content-num-tip {
  position: absolute;
  right: 0.3733rem;
  bottom: 0.24rem;
  font-size: 0.3467rem;
  color: rgba(153, 153, 153, 0.61);
}

.content {
  height: 3.0667rem;
  outline: none;
  padding: 0.24rem 0.3733rem;
  border: 2px solid #eee;
  box-sizing: border-box;
  display: block;
  width: 100%;
}
.p3 {
  padding: 0.3733rem 0.4rem;
}
.p3-title {
  font-size: 0.3467rem;
  color: #222222;
}
.p2-content {
  justify-content: space-between;
  flex-wrap: wrap;
}
.feedback-type {
  text-align: center;
  width: 2.28rem;
  margin-bottom: 0.52rem;
  height: 0.84rem;
  line-height: 0.84rem;
  font-size: 0.3867rem;
  color: #34a359;
  border-radius: 0.1333rem;
  border: solid 1px #34a359;
}
.feedback-selected {
  color: white;
  background-image: url("../../assets/icons/btnselected@2x.png");
  background-position: left top;
  background-size: 100% 100%;
  /* border-color:transparent; */
  border:none;
  /* border-radius: 0; */
}
.nav-bar {
  text-align: center;
  box-shadow: 0rem 0.04rem 0.16rem 0rem rgba(0, 0, 0, 0.1);
  font-size: 0.3467rem;
  position: fixed;
  z-index: 100;
  background-color: #fff;
  left: 0;
  right: 0;
  top: 0;
  justify-content: space-around;
}
.p2-title {
  font-size: 0.3733rem;
  color: #222222;
  padding-bottom: 0.3867rem;
}
.nav-bar > div {
  height: 1.04rem;
  line-height: 1.04rem;
}
.p2 {
  padding: 0.5333rem 0.4rem 0 0.4rem;
}
.nav-bar-before {
  height: 1.04rem;
}
.active {
  color: #ff2a2a;
  position: relative;
}
.active:after {
  position: absolute;
  display: block;
  content: " ";
  bottom: 0;
  width: 1.3467rem;
  height: 0.0533rem;
  background-color: #ff2a2a;
}
</style>

